<template>
    <!-- <div class="back">
        <div class="back_content">
            <icon_back />
        </div>
    </div> -->
    <div @click="dian_list_flag = !dian_list_flag" class="diandiandian">
        <div></div>
        <div></div>
        <div></div>
        <Transition name="show">
            <span v-show="dian_list_flag" class="dian_list_big">
                <div @click.stop="setfn">修改个人资料</div>
                <div @click.stop="enter_flag = true">注销</div>
            </span>
        </Transition>
    </div>
    <div ref="big" class="poa my_big">
        <div :style="{ height: 150 / (390 / 10) + height + 'rem' }" class="list_top">
            <img src="../../assets/quanzhan.jpg">
        </div>
        <div :style="{ top: height + 'rem' }" @touchstart="touchstart($event)" @touchmove="touchmove($event)"
            @touchend="touchend" class="list_big">
            <div class="avatar-wrap">
                <img src="http://43.138.15.137:3000/assets/avatar/6f09a74b-ab6a-4bdf-a161-1274e12f80e0.png">
            </div>
            <div class="user_name">
                <p class="name">去去去</p>
                <p class="qianming">抖音号: c201804a-0eb2-4c99-b177-ded8487368e5</p>
                <!-- <div class="user_follow">
                    关注
                </div> -->
            </div>
            <div class="desc-wrap">
                <p class="title">test111</p>
                <div class="gender">
                    <div class="sex">
                        <icon_sex />
                    </div>
                    999岁
                </div>
                <div class="num-wrap">
                    <p>1获赞</p>
                    <p>25关注</p>
                    <p>5粉丝</p>
                </div>
            </div>
            <div class="tab_list">
                <div :class="{ 'tab_def': huakuai == 0, }" @click="tab(0)">作品 <span> - {{ zuopin_arr.length }}</span>
                </div>
                <div :class="{ 'tab_def': huakuai == 1, }" @click="tab(1)">动态<span> - {{ zuopin_arr.length }}</span>
                </div>
                <div :class="{ 'tab_def': huakuai == 2, }" @click="tab(2)">喜欢<span> - {{ xihuan_arr.length }}</span>
                </div>
                <span :style="{ left: huakuai * 33.33 + '%', }" class="tab_btm"></span>
            </div>
            <div class="btm_list_big">
                <KeepAlive>
                    <component @show_big="show" :data="computedprops" :is="commonarr[commonindex]"></component>
                </KeepAlive>
            </div>
        </div>
    </div>
    <Transition name="video">
        <div class="poa" v-show="big_video_flag">
            <div @click="big_video_off" class="video_big_back">
                <icon_back />
            </div>
            <shipin :video_item_comments_flag="true" :index="big_video_index" :list="computedprops" />
        </div>
    </Transition>
    <enter_common @then="thenfn" :flag="enter_flag" :title="'确定要注销账号吗?'" />
    <Transition name="set_show">
        <div style="z-index: 12;" class="poa" v-show="set_user_flag">
            <set_user @flag="set_user_flag = false" />
        </div>
    </Transition>
</template>
<script setup>
import { ref, defineAsyncComponent, KeepAlive, markRaw, computed } from 'vue';
import { get_myzuopin, get_xihuan } from '../../api/api.js'
const icon_sex = defineAsyncComponent(() => import('../common/icon_man.vue'))
const icon_back = defineAsyncComponent(() => import('../common/icon_back.vue'))
const zuopin = defineAsyncComponent(() => import('../common/my_zuopin.vue'))
const dongtai = defineAsyncComponent(() => import('../common/my_dongtai.vue'))
const xihuan = defineAsyncComponent(() => import('../common/my_xihuan.vue'))
const shipin = defineAsyncComponent(() => import('../common/video_list.vue'))
const set_user = defineAsyncComponent(() => import('../common/set_user.vue'))
// const set_user = defineAsyncComponent(()=>import('../'))
import { useRouter } from 'vue-router';
const router = useRouter()
let commonarr = ref([markRaw(zuopin), markRaw(dongtai), markRaw(xihuan)])
let commonindex = ref(0)
const big = ref()
let start = '';
let height = ref(0)
let zuopin_arr = ref([])
let xihuan_arr = ref([])
let dian_list_flag = ref(false)
let enter_flag = ref(false)
let set_user_flag = ref(false)
function touchstart(e) {
    start = e.changedTouches[0].pageY
}
function touchmove(e) {
    if (big.value.scrollTop <= 0 && e.changedTouches[0].pageY - start >= 0) {
        height.value = (e.changedTouches[0].pageY - start) / (390 / 10)
    }
}
function touchend() {
    let timer = setInterval(() => {
        if (height.value <= 0) {
            clearInterval(timer)
            height.value = 0
            return
        }
        height.value -= 0.1
    }, 1);
}
let huakuai = ref(0)
function tab(index) {
    huakuai.value = commonindex.value = index
}
get_myzuopin(`/api/user/${JSON.parse(localStorage.getItem('user')).userId}/Likes/page/1`).then(res => {
    xihuan_arr.value = res.data.data
})
get_myzuopin(`/api/user/${JSON.parse(localStorage.getItem('user')).userId}/Videos/page/1`).then(res => {
    zuopin_arr.value = res.data.data
})
let computedprops = computed(() => {
    switch (commonindex.value) {
        case 0:
            return zuopin_arr.value;
        case 1:
            return zuopin_arr.value;
        case 2:
            return xihuan_arr.value;
        default:
            return {};
    }
})
let big_video_flag = ref(false)
let big_video_index = ref(0)
function big_video_off() {
    big_video_flag.value = false
    document.querySelector('.bottom_router').style = ''
}
function show(index) {
    big_video_index.value = index
    big_video_flag.value = true
    document.querySelector('.bottom_router').style = 'z-index:-1;'
}
function thenfn(flag) {
    if (flag) {
        localStorage.removeItem('user')
        router.push(
            {
                path: '/user_page',
            }
        )
    } else {
        enter_flag.value = false
    }
}
function setfn() {
    set_user_flag.value = true
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.dian_list_big {
    position: absolute;
    top: 110%;
    right: 0;
    width: r(80);
    background-color: #000000a7;

    div {
        width: 100%;
        height: r(44);
        font-size: r(12);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.diandiandian {
    position: absolute;
    z-index: 1;
    right: r(10);
    top: r(10);
    width: r(30);
    height: r(30);
    border-radius: 50%;
    background-color: #000000a7;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    >div {
        width: r(3);
        height: r(3);
        border-radius: 50%;
        background-color: #fff;
    }
}

.tab_list {
    width: 100%;
    display: flex;
    position: relative;

    >div {
        flex: 1;
        padding: r(12) 0;
        color: #ffffff51;
        font-size: r(16);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tab_def {
        color: #fff;
    }

    .tab_btm {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 33.33%;
        height: r(2);
        background-color: #ffc400;
        transition: all .5s;
    }
}

.back {
    position: absolute;
    left: r(10);
    top: r(10);
    padding: r(15);
    background: rgba(22, 24, 35, 0.6);
    border-radius: 50%;
    font-size: 12px;
    z-index: 3;

    .back_content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: r(12);
        height: r(12);
    }
}

.num-wrap {
    margin-top: r(10);
    width: r(200);
    display: flex;
    justify-content: space-between;

    p {
        font-size: r(14);
    }
}

.desc-wrap {
    margin: r(10);

    .gender {
        margin-top: r(10);
        padding: r(5)r(8);
        border-radius: r(5);
        background: rgba(67, 51, 63, 0.7);
        font-size: r(10);
        max-width: r(60);
        color: #8b8c96;
        text-align: center;

        .sex {
            display: inline-block;
            width: r(10);
            height: r(10);
        }
    }

    .title {
        color: #8b8c96;
        font-size: r(12);
    }
}

.avatar-wrap {
    position: absolute;
    left: r(10);
    top: r(-15);
    border-radius: 50%;
    padding: r(5);
    width: r(90);
    height: r(90);
    background: #161622;

    img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }
}

.user_name {
    position: relative;
    margin: 0 r(10);
    padding: r(80) r(10) r(10);
    border-bottom: r(1) solid rgba(41, 40, 37, 0.8);

    .qianming {
        margin-top: r(5);
        color: #fff;
        font-size: r(12);
    }

    .name {
        color: #fff;
        font-size: r(22);
    }

    .user_follow {
        position: absolute;
        right: r(5);
        top: r(20);
        text-align: center;
        line-height: r(25);
        font-size: r(12);
        margin-right: r(5);
        width: r(70);
        height: r(25);
        background: #f8355f;
    }
}

.my_big {
    background-color: #161622;
    color: #fff;
    overflow-y: scroll;
    z-index: 0;
}

.list_big {
    width: 100%;
    color: #fff;
    margin-top: r(150);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #161622;
    padding-bottom: r(150);
}

.list_top {
    width: 100%;
    height: r(150);
    position: fixed;
    top: 0;
    left: 0;

    img {
        width: 100%;
        height: 100%;
    }
}

.video-enter-active {
    animation: shadow 0.5s ease;
}

.video-leave-active {
    animation: shadow 0.5s ease reverse;
}

.show-enter-active {
    animation: shadow2 0.5s ease;
}

.show-leave-active {
    animation: shadow2 0.5s ease reverse;
}

.set_show-enter-active {
    animation: shadow3 0.5s ease;
}

.set_show-leave-active {
    animation: shadow3 0.5s ease reverse;
}

.video_big_back {
    position: absolute;
    left: r(15);
    top: r(15);
    width: r(15);
    height: r(15);
    z-index: 16;
}

@keyframes shadow {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes shadow2 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes shadow3 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateY(0%);
    }
}
</style>